<template>
  <div class="subjects">
    <div class="subTop">
      <span style="font-size: 20px">试卷管理</span>
      <el-button type="primary" style="font-size: 12px" @click="TestAdd" v-if="isButton(36)">创建试卷</el-button>
    </div>
    <!-- 头部 -->
    <div class="search">
      <el-form :inline="true" :model="data" class="demo-form-inline">
        <el-form-item label="关键字">
          <el-input v-model="params.key" type="text" placeholder="考试名称" clearable />
        </el-form-item>
        <el-form-item label="创建人">
          <el-input v-model="params.admin" placeholder="创建人" clearable />
        </el-form-item>
        <div class="ismy">
          <el-checkbox v-model="params.ismy" label="只看我创建的" size="large" @change="changeBox" />
          <el-button type="primary" class="but" @click="select">查询</el-button>
        </div>
      </el-form>
    </div>
    <!-- 表格 -->
    <div class="bottom">
      <div class="tab">
        <el-table :data="tableData" style="width: 100%" v-loading="loading">
          <el-table-column label="试卷名称" width="250">
            <template #default="scope">
                <p class="titles" @click="bounced(scope.row)">{{scope.row.title}}</p>
            </template>
          </el-table-column>
          <el-table-column prop="counts" label="题量" />
          <el-table-column prop="singles" label="单选" />
          <el-table-column prop="multiples" label="多选" />
          <el-table-column prop="judges" label="判断" />
          <el-table-column prop="blanks" label="填空" />
          <el-table-column prop="qas" label="问答" />
          <el-table-column prop="scores" label="总分" />
          <el-table-column prop="admin" label="创建人" />
          <el-table-column prop="addtime" label="更新时间" width="180" >
            <template #default="scope">
              <span>{{scope.row.addtime.substr(0, 16)}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="address" fixed="right" label="操作" v-if="isButton(67) || isButton(68)">
            <template #default="scope">
              <a style="color: #409eff; cursor: pointer" @click="update(scope.row.id)" v-if="isButton(67)">编辑</a>
              <span v-if="isButton(67) && isButton(68)"> | </span>
              <a style="color: #409eff; cursor: pointer" @click="del(scope.row.id)" v-if="isButton(68)">删除</a>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagin">
        <el-pagination :page-size="5" :page-sizes="[5, 20, 30, 50]" background
          layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" />
      </div>
    </div>
    <!-- 引入试卷对话框 -->
    <Parper :isPar="subPar.isPar" @isPars="isPars" :id="subPar.id" :title="subPar.title"></Parper>
  </div>
</template>

<script lang='ts' setup>
import { onMounted, reactive, toRefs, watchEffect } from "vue";
// 引入封装接口
import { subjectsList, subjectsDel } from "../../apis/subjects/subject";
import { ElMessage, ElMessageBox } from "element-plus";
import { useRouter } from "vue-router";

import Parper from "../../components/test/Paper.vue";
// 引入权限设置显示隐藏
import { isButton } from "../../utils/isButton";
const data = reactive({
  // 列表参数
  params: {
    key: "",
    admin: "",
    ismy: 0,
    page: 1,
    psize: 5,
  },
  // 列表数据
  tableData: [],
  // 加载
  loading: true,
  total: 0,
  subPar:{
    isPar:false,
    id:0,
    title:''
  }
});

const { subPar,params, tableData, loading, total }: any = toRefs(data);
// 创建人内容改变
const changeBox = (e: any) => {
  e == true ? (params.value.admin = "") : e;
};
watchEffect(() => {
  params.value.admin != "" ? (params.value.ismy = 1) : params.value.admin;
});
// 试卷列表
const subList = async () => {
  const res: any = await subjectsList(params.value);
  if (res.errCode === 10000) {
    data.tableData = res.data.list;
    total.value = res.data.counts;
  } else {
    ElMessage.error(res.errMsg);
  }
  loading.value = false;
};
onMounted(() => {
  subList();
});
// 查询
const select = () => {
  subList();
};
// 分页
const handleSizeChange = (val: number) => {
  params.value.psize = val;
  subList();
};
const handleCurrentChange = (val: number) => {
  params.value.page = val;
  subList();
};
// 定义删除的方法
const dell = async (id: any) => {
  const res: any = await subjectsDel({ id });
  if (res.errCode == 10000) {
    ElMessage.success("删除成功");
    subList();
  } else {
    ElMessage.error(res.errMsg);
  }
};
// 删除
const del = (id: number) => {
  ElMessageBox.confirm("确定要删除该考试吗?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      dell(id);
    })
    .catch(() => {
      ElMessage.error("已取消删除");
    });
};
// 创建试卷
const router = useRouter()
const TestAdd = () => {
  router.push('/SubjectsAdd/1')
}
// 子传父
const isPars = (e: any) => {
  subPar.value.isPar = e;
};
// 试卷弹框
const bounced = (row: any) => {
  // console.log(row.id)
  // isButton(29) ? subPar.isPar = true : subPar.isPar = false
  subPar.value.isPar = true
  subPar.value.id = row.id;
  subPar.value.title = row.title;
};
// 编辑
const update = (id: any) => {
  router.push(`/SubjectsAdd/${id}`)
}
</script>
<style scoped lang="less">
@import url("../../static/css/Subjects/Subjects.css");
</style>